<template>
  <div class="son-component">
    <!-- 3.父传子-模板中直接使用 -->
    {{ dks }}

    <button @click="changeFatherData()">修改值</button>
  </div>
</template>

<script>
export default {
  name: "SonComponent",
  // 2.父传子-子组件内部 通过 props 接收
  props: ["dks"],
  data() {
    return {
      num: 90,
    };
  },
  methods: {
    changeFatherData() {
        // 1. 子传父-通过$emit向父组件发送消息通知 $emit(方法名，修改后的值)
      this.$emit("changeData", this.num);
    },
  },
};
</script>

<style scoped>
.son-component {
  width: 200px;
  height: 200px;
  border: 1px black;
}
</style>